<template>
  <div class="design-main">
    <el-tabs
        v-model="activeTabId"
        type="card"
        class="panel-tabs"
        editable
        @edit="tabsEdit"
    >
      <el-tab-pane
          v-for="item in tabArr"
          :key="item.id"
          :label="item.title"
          :name="item.id"
      >
        <design-panel :panel-id="item.id"/>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="addTabVisible" title="新增面板">
      <el-form v-model="newPanelForm" label-width="120px">
        <el-form-item label="面板名称">
          <el-input v-model="newPanelForm.name"/>
        </el-form-item>
        <el-row class="panel-button-group">
          <el-button type="primary" @click="addTab">确认</el-button>
          <el-button>取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import designPanel from "@/views/dsign/design-panel";
import {isEqual} from "lodash";
import {mapState} from "vuex";

export default {
  name: "main-home-main",
  props: {},
  components: {designPanel},
  computed: mapState({
    panelItems(state) {
      let res = [];
      let panelIds = Object.keys(state.panelData);
      for (let i = 0; i < panelIds.length; i++) {
        res.push({
          label: state.panelData[panelIds[i]].name,
          id: panelIds[i]
        });
      }
      return res;
    }
  }),
  data() {
    return {
      newPanelForm: {
        name: ""
      },
      addTabVisible: false,
      tabArr: [
        {
          id: "default",
          title: "默认面板"
        }
      ],
      activeTabId: 'default'
    }
  },
  watch: {
    activeTabId(newValue, oldValue) {
      this.$store.commit('setActivePanelId', newValue);
    }
  },
  methods: {
    addTab() {
      if (this.panelItems.filter((row) => {
        return isEqual(this.newPanelForm.name, row.label);
      }).length > 0) {
        this.$message.error("已有相同名称的面板!");
        return;
      }
      let id = this.$common.getGuid();
      this.tabArr.push({
        id: id,
        title: this.newPanelForm.name
      });
      this.activeTabId = id;
      this.$store.commit('addPanelData', {id: id, name: this.newPanelForm.name});
      this.newPanelForm = {
        name: ""
      };
      this.addTabVisible = false;
    },
    tabsEdit(targetId, action) {
      if (isEqual(action, "add")) {
        this.addTabVisible = true;
      } else if (isEqual(action, "remove")) {
        let removeIndex = -1;
        let activeId = -1;
        for (let i = 0; i < this.tabArr.length; i++) {
          let tab = this.tabArr[i];
          if (isEqual(tab.id, targetId)) {
            removeIndex = i;
            activeId = this.$common.isEmpty(this.tabArr[i + 1]) ? (this.tabArr[i - 1].id) : (this.tabArr[i + 1].id);
          }
        }
        this.activeTabId = activeId;
        this.tabArr = this.tabArr.filter((tab) => {
          return !isEqual(tab.id, targetId);
        })
      }
    }
  },
  mounted() {

  },
  created() {
    this.$store.commit('addPanelData', {id: 'default', name: '默认面板'});
  }
}
</script>

<style lang="less" scoped>
.design-main {
  .panel-tabs {
    .el-tab-pane {
      width: 100%;
      height: 80vh;
      overflow-y: auto;
    }
  }

  .panel-button-group {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;

    .el-button {
      display: flex;
    }
  }

}


</style>
